<template>
  <div class="book-container">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="编号" width="80" align="center">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>

      <el-table-column prop="name" label="书名" align="center">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column prop="author" label="作者" align="center">
        <template slot-scope="scope">
          {{ scope.row.author }}
        </template>
      </el-table-column>
      <el-table-column prop="price" label="价格" align="center">
        <template slot-scope="scope">
          {{ scope.row.price }}
        </template>
      </el-table-column>
      <el-table-column prop="press" label="出版社" align="center">
        <template slot-scope="scope">
          {{ scope.row.press }}
        </template>
      </el-table-column>
      <el-table-column prop="desc" label="简介" align="center">
        <template slot-scope="scope">
          {{ truncateText(scope.row.desc, 40) }}
        </template>
      </el-table-column>
      <!-- <el-table-column prop="desc" label="简介" align="center">
        <template slot-scope="scope">
          {{ truncateText(scope.row.desc, 20) }}
        </template>
      </el-table-column> -->
      <!-- <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="primary" round @click="handleBorrow(scope)"
            >借阅</el-button
          >
        </template>
      </el-table-column> -->
    </el-table>

    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="pagesize"
      :current-page="pagenum"
      @current-change="handlePageChange"
    >
    </el-pagination>
  </div>
</template>

<script>
import { getBookList } from "@/api/book";
export default {
  data() {
    return {
      tableData: [],
      pagenum: 1,
      pagesize: 10,
      total: null,
    };
  },
  created() {
    this.getData();
  },
  methods: {
    async getData() {
      const res = await getBookList({
        pagenum: this.pagenum,
        pagesize: this.pagesize,
      });
      this.tableData = res.result;
      this.total = res.total;
    },
    truncateText(text, maxLength) {
      if (text && text.length > maxLength) {
        return text.slice(0, maxLength) + "...";
      }
      return text;
    },
    async handlePageChange(page) {
      this.pagenum = page;
      await this.getData();
    },
    // async handleBorrow(scope) {
    //   const user_id = +localStorage.getItem("id");
    //   const book_id = scope.row.id;
    //   await addBorrow({
    //     book_id,
    //     user_id,
    //   });
    // },
  },
};
</script>

<style scoped lang="less">
.book-container {
  padding: 20px;
}
</style>